<!-- 圖片上傳 -->
<template>
  <div>
      <div class="uploadImage-box">
          <!-- <div class="showImage">
               <div class="uploadImg">
                    <img :src="uploadImg" alt="">
                </div>
          </div> -->
          <div class="uploadBtn" :style="{backgroundImage:'url('+uploadImg+')',width:width+'px',height:height+'px'}">
              <common-icon type="_shangchuan" :size="26" v-if="!uploadImg"></common-icon>
              <p class="introText" v-if="!uploadImg">{{introText}}</p>
              <input id="uploaderInput" ref="uploaderInput" class="uploader-input"
              type="file" name="files" accept="image/*" @click="clearFile" @change="uploadImage($event)" />
              <div class="needUpdatePic" v-if="uploadImg" @click="handUpload">
                重新上传
            </div>
          </div>

      </div>
      <Alert v-if="isShowAlert" type="error" style="width: 220px;margin-top: 10px;" show-icon>图片大小不能超过3M！</Alert>
  </div>
</template>

<script>
import commonIcon from "_c/common-icon/common-icon.vue"
import { upLoadImg } from "@/api/data";
import { getImgUrl } from "@/api/server-url";
import { ocridCard } from '@/api/openapi';

export default {
    props:{
        imgUrl:{
            type:String,
            default:''
        },
        // 这个需要改为必传,tmp是临时文件位置，可能会被销毁
        uploadType:{
        	type:String,
            default:''
        },
        width:{
            type:Number,
            default:180
        },
        height:{
            type:Number,
            default:120
        },
        introText:{
            type:String,
            default:''
        }
    },
  data () {
    return {
        uploadImg: '',
        imgSize:1024*1024*3,
        // uploadImgArr:[{
        //     img:''
        // }],
        isShowAlert: false
    };
  },

  methods: {
    //   toto(){
    //        this.$emit('uploadData',[1,2,3]);
    //   },
      handUpload(){
         this.$refs.uploaderInput.click(function($event){
              this.uploadImage($event);
          })
      },
      clearFile(e) {
          e.target.value = '';
      },
      uploadImage(event){
           let files = event.target.files[0] || event.dataTransfer.files[0];
           let filesSize = files.size;
           if (filesSize > this.imgSize) {
               this.isShowAlert = true;
                setTimeout(()=> {
                    this.isShowAlert = false;
                }, 2000);
               return false;
           }
           let src, url = window.URL || window.webkitURL || window.mozURL;
           if (url) {
                src = url.createObjectURL(files);
            } else {
                src = event.target.result;
            }
            // this.uploadImg=src;
            // this.uploadImgArr[0].img=src;

            let formData= new FormData();
            formData.append("files",files);

            if(this.uploadType == 'idcard'){
                let formData1 = new FormData();
                formData1.append("file",files);
                ocridCard(formData1).then(res=>{
                    if(res.data.code == 200){
                        this.$emit('ocridDetail',res.data.data);
                    }
                })
            }
            upLoadImg(formData,this.uploadType,0).then(res => {
                if(res.data.code==200 || res.data.code==201){
                    // debugger
                    this.uploadImg =getImgUrl(res.data.data.name);
                    // this.uploadImgArr[0].img =getImgUrl(res.data.data.name);
                    this.$emit('uploadData',res.data.data);
                }
            })
      },
  },

  computed: {
      returnUrl(){
          if(this.imgUrl){
              this.uploadImg = getImgUrl(this.imgUrl)
              return this.imgUrl;
          }else{
               this.uploadImg='';
               return ''
          }
      }
  },

  mounted(){
    console.log('文件存放位置' + this.uploadType);
    if(this.uploadType == '') {
        this.$Message.error('upload组件未传入uploadType，请检查');
    }
  },
  watch:{
      returnUrl(val,old){
        // 值改变就传出去一次，因为如果在患者档案的弹窗只修改了一个照片，也需要把另一个照片的路径也传出去让表单获取到
        if(val) {
          let obj = {
              name: val
          }
          this.$emit('uploadData',obj);
          console.log('改变了');
        }
      }
  },
  components: {
      commonIcon
  },

}

</script>
 <style lang='less'>
   @import '../../less/variable.less';
    .uploadImage-box{

        display: flex;
        &>div{
             position: relative;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 15px;
        }
        .showImage{
            .uploadImg{

                border: 1px dashed #e5e5e5;
                img{
                    width: 100%;
                }
            }
        }
        .needUpdatePic{
            position: absolute;
            z-index: 2;
            bottom: 0;
            height: 30px;
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 14px;
            &:hover{
                color: @hoverColor;
            }
        }
        .uploadBtn{
            // background: url('~@/assets/images/error-page/noImg.jpg');
            background-position: center;
            background-size: cover;
            position: relative;
            cursor: pointer;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            flex-direction: column;
            border: 1px dashed #e5e5e5;
            &:hover{
                border-color:@mainColor;
                .iconfont{
                    color: @mainColor;
                }
            }
            &>.iconfont {
              color: #474747;
            }
            .uploader-input{
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }
            .introText{
                font-size: 14px;
            }
        }

    }
</style>
